<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="" content="">
  <title></title>
  <style>
    *{margin: 0; padding: 0}
    table{position: absolute; left: 0; top: 0}
    td{width: 48px; height: 48px}
    #map{width: 750px; height: 500px; background-color:cyan}
    #aaa{float: left}
    #aaaa{overflow: hidden; padding: 10px 0}
    button{text-align: center; width: 44px; height: 32px; font-size: 18px; color:#000; background-color: cyan}
    button:hover{transform: scale(1.2); transition: 0.5s;background-color: red; font-size: 14px}
  </style>
</head>

<body>

  <!-- 地图 -->
  <table border="1", cellspacing="0">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
  <div id="map"></div>
  <!-- //按钮 -->
  <div id='aaaa'><h2 id='aaa'>分数：</h2><h2 id='aa'>0</h2></div>
  <h2>速度：</h2>
  <button id='a'>快</button>
  <button id='b' >正常</button>
  <button id='c' >慢</button>
  <button id='d' >暂停</button>
  <h4>(空格=暂停，回车=开始正常速度继续游戏)</h4>
  <script>
    //封装创建div方法-createDiv
    var map = document.getElementById('map')
    var arr = [] //放蛇身的数组
    var nodes = []
    function createDiv(color){
      var div = document.createElement('div')
      div.style.width = '50px'
      div.style.height = '50px'
      div.style.position = 'absolute'
      div.style.left = parseInt(Math.random()*10)*50 + 'px'
      div.style.top = parseInt(Math.random()*10)*50 + 'px'
      div.style.backgroundColor = color
      map.appendChild(div)
      return div
    }
    //通过createDiv随机生成蛇头
    var headNode = createDiv('red')
    nodes.push(headNode)
    headNode.value = '左'
    //通过createDiv随机生成蛇尾
    var foodNode = createDiv('green')
    //移动蛇头
    function move(){
      //身体移动
      if(arr.length > 0){
        for(var n = arr.length - 1; n >= 0 ; n--){
          switch(arr[n].value){
        case '左':
         arr[n].style.left = parseInt(arr[n].style.left) - 50 + 'px'
        break
        case '右':
         arr[n].style.left = parseInt(arr[n].style.left) + 50 + 'px'
        break
        case '上':
         arr[n].style.top = parseInt(arr[n].style.top) - 50 + 'px'
        break
        case '下':
         arr[n].style.top = parseInt(arr[n].style.top) + 50 + 'px'
        break
      }
      if(n == 0){
        arr[n].value = headNode.value
      }else{arr[n].value = arr[n - 1].value}
     
        }
      }
      switch(headNode.value){
        case '左':
         headNode.style.left = parseInt(headNode.style.left) - 50 + 'px'
        break
        case '右':
         headNode.style.left = parseInt(headNode.style.left) + 50 + 'px'
        break
        case '上':
         headNode.style.top = parseInt(headNode.style.top) - 50 + 'px'
        break
        case '下':
         headNode.style.top = parseInt(headNode.style.top) + 50 + 'px'
        break
      }
      //撞墙死亡
      if(parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>700||parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>450){
        clearInterval(t)
        alert('撞墙了~')
      //   switch(headNode.value){
      //   case '左':
      //    headNode.style.left = 0
      //   break
      //   case '右':
      //    headNode.style.left = 450 + 'px'
      //   break
      //   case '上':
      //    headNode.style.top = 0
      //   break
      //   case '下':
      //    headNode.style.top = 450 + 'px'
      //   break
      // }
      }
      //吃到自己身体死亡
      if(arr.length > 0){
        for(var n=0; n < arr.length; n++){
          if(headNode.style.left == arr[n].style.left && headNode.style.top == arr[n].style.top){
            alert('咬到自己尾巴啦~')
            clearInterval(t)
          }
        }
      }
      //当蛇头和食物位置重合，我选择食物消失重心随机出现再让蛇身加一并跟着最后一块
      if(headNode.style.left == foodNode.style.left && headNode.style.top == foodNode.style.top){
        //蛇身加一并跟着最后一块（我选择把所有蛇身存在一个数组里）
        var bodyNode = createDiv('#000')
        var aa = document.getElementById('aa')
        aa.innerHTML++
        var lastNode //最后一块
        if(arr.length > 0){
          lastNode = arr[arr.length - 1]
        }else{
          lastNode = headNode
        }
        //跟着(是和蛇头反向相反，但从第二块开始就没value了即没方向了)
        switch(lastNode.value){
          case '左':
           bodyNode.style.left = parseInt(lastNode.style.left) + 50 + 'px'
           bodyNode.style.top = lastNode.style.top
          break
          case '右':
           bodyNode.style.left = parseInt(lastNode.style.left) - 50 + 'px'
           bodyNode.style.top = lastNode.style.top
          break
          case '上':
           bodyNode.style.top = parseInt(lastNode.style.top) + 50 + 'px'
           bodyNode.style.left = lastNode.style.left
          break
          case '下':
           bodyNode.style.top = parseInt(lastNode.style.top) - 50 + 'px'
           bodyNode.style.left = lastNode.style.left
          break
        }
        //给第二块开始value
        bodyNode.value = lastNode.value
        arr.push(bodyNode)
        nodes.push(bodyNode)
        //食物随机出现
        var px =  parseInt(Math.random()*10)*50
        var py =  parseInt(Math.random()*10)*50
        for(var n=0; n < nodes.length; n++){
          if(parseInt(nodes[n].style.left)==px&&parseInt(nodes[n].style.top)==py){
            px =  parseInt(Math.random()*10)*50
            py =  parseInt(Math.random()*10)*50
            n = -1
          }
        }
        foodNode.style.left = px + 'px'
        foodNode.style.top = py + 'px'
      }
    }
    var t = setInterval(move, 500)
    //通过键盘码改变蛇头移动方向
    document.onkeydown = function(e){
      //console.log(e.keyCode)
      switch(e.keyCode){
        case 37:
        if(headNode.value != '右'||arr.length==0){headNode.value = '左'}
        //headNode.value = '左'
        break
        case 38:
        if(headNode.value != '下'||arr.length==0){headNode.value = '上'}
        //headNode.value = '上'
        break
        case 39:
        if(headNode.value != '左'||arr.length==0){headNode.value = '右'}
        //headNode.value = '右'
        break
        case 40:
        if(headNode.value != '上'||arr.length==0){headNode.value = '下'}
         //headNode.value = '下'
        break
        case 32:
          clearInterval(t)
        break
        case 13:
          t = setInterval(move, 500)
        break
      }
    }

    document.getElementById('a').onclick = function(){
      clearInterval(t)
      setTimeout(function(){
        t = setInterval(move, 200)
      }, 2000)
    }

    document.getElementById('b').onclick = function(){
      clearInterval(t)
      setTimeout(function(){
        t = setInterval(move, 500)
      }, 2000)
    }

    document.getElementById('c').onclick = function(){
      clearInterval(t)
      setTimeout(function(){
        t = setInterval(move, 1000)
      }, 2000)
    }

    document.getElementById('d').onclick = function(){
      clearInterval(t)
    }

 //适配手机
    var mybody = document.getElementsByTagName('body')[0];
 
	//滑动处理
	var startX, startY, moveEndX, moveEndY, X, Y;   
 
	mybody.addEventListener('touchstart', function(e) {
 
 
	    startX = e.touches[0].pageX;
 
	    startY = e.touches[0].pageY;
 
	});
 
	mybody.addEventListener('touchmove', function(e) {
 
 
	    moveEndX = e.changedTouches[0].pageX;
 
	    moveEndY = e.changedTouches[0].pageY;
 
	    X = moveEndX - startX;
 
	    Y = moveEndY - startY;
 
	    if ( X > 0 && Math.abs(X)>Math.abs(Y)) {
 
	    	headNode.value = '右'
 
	    }else if ( X < 0 && Math.abs(X)>Math.abs(Y)) {
 
	    	headNode.value = '左'
 
	    }else if ( Y > 0 && Math.abs(Y)>Math.abs(X)) {
 
        headNode.value = '下'
	    
	    }else if ( Y < 0  && Math.abs(Y)>Math.abs(X) ) {
	    	
	    	headNode.value = '上'
	    
	    }else{
	    
	    	//alert('没滑动'); 
	    
	    }
 
	});

  </script>
</body>

</html>